<template>
  <div class="basic-information-page">
    <div class="type-area">
      <div class="left">
        <img class="wazi" src="../../assets/wazi01.jpg" alt />
        <img class="experience" src="../../assets/Experience.png" alt />
      </div>
      <div class="right">
        <img class="hi" src="../../assets/Icon-hi.png" alt />
        <div class="right-content">
          <p>Hello I'm ZhaoHehui</p>
          <p>基本信息</p>
          <p>
            对生活充满热爱，对未来充满期待。
            <br />时刻正视自己的不足，且会不断的自我反省和学习总结以提升自己。
            <br />受想法和热情驱动的前端 er，
            <br />梦想自己开发的软件可以改善或者改变周围人们的生活。
          </p>
          <div class="info-row">
            <a-icon class="icon" type="man" />
            <p>男</p>
          </div>
          <div class="info-row">
            <a-icon class="icon" type="smile" />
            <p>23岁</p>
          </div>
          <div class="info-row">
            <a-icon class="icon" type="solution" />
            <p>两年工作经验</p>
          </div>
          <div class="info-row">
            <a-icon class="icon" type="environment" />
            <p>河南</p>
          </div>
          <div class="info-row">
            <a-icon class="icon" type="phone" />
            <p
              @mousemove="mousemoveWebUrl('top')"
              @mouseout="mouseoutWebUrl('top')"
              class="text"
              v-clipboard:copy="'17633883245'"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyLose"
            >176 3388 3245</p>
            <img class="title-img" v-show="titleShow" src="../../assets/dianjifuzhibase.png" alt />
          </div>
          <div class="info-row">
            <a-icon class="icon" type="mail" />
            <p
              @mousemove="mousemoveWebUrl('bottom')"
              @mouseout="mouseoutWebUrl('bottom')"
              class="text"
              v-clipboard:copy="'508460199@qq.com'"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyLose"
            >508460199@qq.com</p>
            <img class="title-img" v-show="titleShowTwo" src="../../assets/dianjifuzhibase.png" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: 'BasicInformationPage',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
    return {
      titleShow: false,
      titleShowTwo: false
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
  */
  created () { },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    copyLose () {
      this.$message.error('复制网址失败，不应该呀！')
    },
    copySuccess () {
      this.$message.success('复制网址成功，快去粘贴吧！')
    },
    mousemoveWebUrl (value) {
      if (value === 'top') {
        this.titleShow = true
      } else if (value === 'bottom') {
        this.titleShowTwo = true
      }
    },
    mouseoutWebUrl (value) {
      if (value === 'top') {
        this.titleShow = false
      } else if (value === 'bottom') {
        this.titleShowTwo = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.basic-information-page {
  width: 100%;
  height: 1080rem;
  background: #fbf8cc;
  .type-area {
    display: flex;
    margin: auto;
    padding: 146rem 0 0 0;
    width: 1240rem;
    height: 100%;
    .left {
      position: relative;
      margin-right: 130rem;
      .wazi {
        width: 400rem;
      }
      .experience {
        position: absolute;
        top: 484rem;
        left: 132rem;
        width: 300rem;
      }
    }
    .right {
      img {
        margin-bottom: 24rem;
        width: 60rem;
      }
      .right-content {
        font-size: 18rem;
        & > p:nth-child(1) {
          margin: 0;
          color: #ffa101;
        }
        & > p:nth-child(2) {
          font-size: 40rem;
          color: #002b46;
        }
        & > p:nth-child(3) {
          margin-bottom: 70rem;
          width: 600rem;
          color: #002b46;
        }
        .info-row {
          display: flex;
          position: relative;
          align-items: center;
          margin-bottom: 24rem;
          .icon {
            margin-right: 24rem;
            font-size: 24rem;
            font-weight: 700;
            color: #002b46;
          }
          p {
            margin: 0;
            font-weight: 700;
            color: #002b46;
          }
          .text {
            cursor: pointer;
            &:hover {
              color: #6d6fda;
            }
          }
          .title-img {
            position: absolute;
            top: 20rem;
            left: 70rem;
            width: 120rem;
            z-index: 999;
          }
        }
      }
    }
  }
}
</style>
